---
group: 'components'
category: 'state'
title: Text
description: 'Text'
order: 1
---

## Basic Usage

```js live=true
<Text>text normal</Text>
```

## Colors

Set the color of Text.

```js live=true
<Group>
  <Text color="warning">text warning</Text>
  <Text color="error">text error</Text>
  <Text color="success">text success</Text>
</Group>
```

## Style

Set the style of Text.

```js live=true
<Group>
  <Text underline>text underline</Text>
  <Text delete>text delete</Text>
  <Text italic>text italic</Text>
  <Text weight={600}>text weight</Text>
  <Text size="lg">text weight</Text>
</Group>
```

## Variant

Set variant of Text.

```js live=true
<Group direction="column">
  <Text variant="h1">h1 title</Text>
  <Text variant="h2">h2 title</Text>
  <Text variant="h3">h3 title</Text>
  <Text variant="h4">h4 title</Text>
  <Text variant="h5">h5 title</Text>
  <Text variant="h6">h6 title</Text>
</Group>
```

## Transform

Set transform of Text.You can set the value to capitalize, uppercase and lowercase.

```js live=true
<Group>
  <Text transform="capitalize">ASSddd</Text>
  <Text transform="uppercase">ASSddd</Text>
  <Text transform="lowercase">ASSddd</Text>
</Group>
```
